<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级竞赛</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }
    </style>
</head>

<body>
    <header>
        <h1>班级竞赛</h1>
        <p>软件2403 5月7日</p>
    </header>
    <!-- 这是头部标题的html -->
    <nav>
        <a href="#jieshao">竞赛介绍</a>
        <a href="#xuanshou">参赛选手</a>
        <a href="#guize">竞赛规则</a>
        <a href="#chengji">成绩展示</a>
    </nav>
    <!-- 这是导航栏的html -->
    <main>
        <div class="main-introduce">
            <h2 id="jieshao">竞赛介绍</h2>
            <ul type="none" class="main-introduce1">
                <li>
                    <h3 style="font-size: 18px;">竞赛目的</h3>
                    <ul type="disc">
                        <li>通过竞赛形式，打破传统课堂学习的单调性，营造紧张而有趣的学习氛围，激发学生对 Web 代码学习的热情，提升学生主动探索 Web 开发技术的积极性。</li>
                        <li>检验学生对 HTML、CSS、JavaScript 等 Web 开发核心知识的掌握程度，促使学生系统复习和巩固课堂所学，发现知识漏洞并及时弥补。</li>
                        <li>鼓励学生将理论知识应用于实际项目开发，提升学生的代码编写、问题调试、项目部署等实践操作能力，增强学生解决实际问题的能力。</li>
                        <li>以小组为单位参赛，让学生在合作过程中学会沟通交流、分工协作，培养团队意识和团队协作精神，为未来参与实际项目开发积累经验。</li>
                        <li>设置具有一定开放性和创新性的竞赛题目，鼓励学生发挥创意，尝试新的技术和方法，培养学生的创新思维和创新能力。</li>
                    </ul>
                </li>
                <li>
                    <h3 style="font-size: 18px;">竞赛意义</h3>
                    <ul type="disc">
                        <li>帮助学生提升 Web 开发技能，增强自信心，为未来的职业发展和继续深造奠定坚实基础。在竞赛过程中积累的项目经验和解决问题的能力，将成为学生个人成长的宝贵财富。</li>
                        <li>促进班级内学生之间的交流与合作，营造良好的学习氛围，增强班级凝聚力和向心力。同时，竞赛成果展示也能激发更多学生的学习动力，形成良性竞争的学习环境。</li>
                        <li>为教师提供了解学生学习情况的有效途径，通过竞赛结果分析，教师可以发现教学过程中的不足之处，及时调整教学策略和方法，提高教学质量和教学效果。</li>
                        <li>鼓励学生关注 Web 技术的最新发展动态，尝试使用新技术、新框架进行开发，推动学生对前沿 Web 技术的学习和应用，促进 Web 开发技术在班级内的传播和发展。</li>
                    </ul>
                </li>
                <li>
                    <h3 style="font-size: 18px;">竞赛形式</h3>
                    <ol>
                        <li>发布竞赛通知，明确竞赛规则、时间安排和奖项设置等信息，鼓励学生报名参赛。学生根据自身情况选择个人赛或团队赛，并在规定时间内完成报名。</li>
                        <li>在竞赛开始前，邀请专业教师或技术专家为参赛学生进行赛前培训，讲解竞赛涉及的知识点、技术难点和开发技巧，解答学生的疑问，帮助学生做好竞赛准备。</li>
                        <li>个人赛和团队赛同时进行，学生在规定的时间内完成竞赛题目。竞赛题目分为基础题和创新题，基础题主要考察学生对 Web 开发基础知识的掌握，创新题则注重考察学生的创新能力和实际应用能力。
                        </li>
                        <li>竞赛结束后，学生提交自己的作品。评审团由专业教师、行业专家组成，根据作品的功能完整性、代码质量、创新性、界面设计等方面进行综合评分，评选出一、二、三等奖和优秀奖。</li>
                        <li>举办竞赛成果展示会，邀请所有参赛学生展示自己的作品，并进行现场演示和讲解。同时，为获奖学生颁发证书和奖品，对优秀作品进行表彰和宣传。</li>
                    </ol>
                </li>
            </ul>
        </div>
        <!-- 这是竞赛介绍的html -->
        <div class="main-player">
            <h2 id="xuanshou">参赛选手</h2>
            <div class="main-player1">
                <div>
                    <img src="./imsge/zhangsan.jpg" alt="" width="100%" title="张三">
                </div>
                <div>
                    <p>姓名：张三</p>
                    <p>年龄：19岁</p>
                    <p>简介：我是一名专注Web前端开发的学生，系统学习HTML5、CSS3、JavaScript等核心技术，熟练运用Vue.js和React框架搭建交互界面。曾独立完成响应式博客网站开发，通过Flex和Grid布局实现多端适配，使用Axios优化数据交互性能。熟悉Git版本控制与Webpack打包流程，掌握TypeScript静态类型检查技术。热衷钻研前沿技术，积极参与开源项目贡献代码。擅长将设计稿高效转化为功能完整的页面，注重用户体验与代码质量，期待在实践中深化技术能力，成为优秀的Web前端开发者。</p>
                </div>
            </div>
            <div class="main-player1">
                <div>
                    <img src="./imsge/lisi.jpg" alt="" title="李四">
                </div>
                <div>
                    <p>姓名：李四</p>
                    <p>年龄：19岁</p>
                    <p>简介：作为Web前端方向的学生，我系统掌握HTML、CSS、JavaScript基础，熟练运用Vue3、React框架进行项目开发。曾参与校园二手交易平台项目，负责前端页面搭建与交互逻辑实现，通过组件化开发提升代码复用性，利用ECharts实现数据可视化功能。熟悉Git进行版本管理，能使用Vite优化项目构建流程，掌握Sass预处理语言与PostCSS进行样式开发。持续关注Web技术发展，学习WebGL、PWA等前沿知识，具备良好的代码规范意识和团队协作能力，希望在前端领域不断探索创新。</p>
                </div>
            </div>
        </div>
        <!-- 这是参赛选手的html -->
        <div class="main-rule">
            <h2 id="guize">参赛规则</h2>
            <ol>
                <li>
                    <h3>文档声明</h3>
                    <p>必须使用正确的文档类型声明，以确保浏览器以标准模式渲染页面。</p>
                </li>
                <li>
                    <h3>HTML结构</h3>
                    <p>html应包含页面语言设置、字符编码正确、可支持响应式设计</p>
                </li>
                <li>
                    <h3>语义化标签</h3>
                    <p>使用语义化的HTML标签，提高页面可读性和搜索引擎化</p>
                </li>
                <li>
                    <h3>注释</h3>
                    <p>在复杂或重要的代码段中加入注释,以提高代码的可读性</p>
                </li>
            </ol>
        </div>
        <!-- 这是参赛规则的html -->
        <div class="main-achievement">
            <h2 id="chengji">成绩展示</h2>
            <table rules="all" frame="box">
                <tr>
                    <th></th>
                    <th>张三</th>
                    <th>李四</th>
                </tr>
                <tr>
                    <th>语文</th>
                    <td>88</td>
                    <td>89</td>
                </tr>
                <tr>
                    <th>数学</th>
                    <td>90</td>
                    <td>91</td>
                </tr>
                <tr>
                    <th>英语</th>
                    <td>92</td>
                    <td>93</td>
                </tr>
            </table>
        </div>
        <!-- 这是成绩展示的html -->
    </main>
    <footer>
        <p>日积月累,厚积薄发</p>
        <p>制作者:软件2403 闫旭婷</p>
    </footer>
    <!-- 这是页脚的html -->
</body>

</html>